<template>
	<view class="comment-detail">
		<view v-for="item of list" :key="item.id" class="inline-flex fill column user-comment">
			<view class="inline-flex fill user-comment__info">
				<image class="inline-flex user-comment__info__portrait" :src="item.avatar"></image>
				<view class="flex column user-comment__info__other">
					<view>{{item.nickname}}</view>
					<text>{{item.reviewTime}}</text>
				</view>
				<view class="user-comment__info__rate">
					<u-rate inactive-color="#D9D9D9" active-color="#FF710A" disabled :count="5"
						:current="item.overallRating"></u-rate>
				</view>
			</view>
			<view class="inline-flex fill user-comment__content">
				{{item.reviewContent}}
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			// styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { isEmpty } from '@/utils/util';
	import { defineProps, watchEffect } from 'vue';
	import { getSpuCommentList } from '@/apis/service';
	import { useGetDataPaging } from '@/hooks/paging';
	const props = defineProps<{ spuId : string }>();

	const { list, refresh, tolower } = useGetDataPaging({
		api: getSpuCommentList,
	});

	watchEffect(() => {
		if (isEmpty(props.spuId)) return;
		refresh();
	})
</script>

<style lang="scss">

</style>